<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 材质分类展示</title>
    <link rel="stylesheet" href="style.css">
    <script type="importmap">
    {
        "imports": {
            "three": "../three.js/build/three.module.js",
            "three/addons/": "../three.js/examples/jsm/"
        }
    }
    </script>
</head>
<body>
    <!-- 左侧面板 -->
    <div id="left-panel">
        <div id="header">
            <h1>Three.js 标签分类展示</h1>
            <p>探索CSS3D、CSS2D和Sprite等不同标签类型的效果和应用</p>
        </div>
        
        <div id="controls">
            <div class="control-group">
                <label for="labelCategory">标签类型:</label>
                <select id="labelCategory">
                    <option value="comparison">多种标签对比</option>
                    <option value="css3d_sprite_scene">CSS3DSprite场景</option>
                    <option value="css3d">CSS3D标签</option>
                    <option value="css2d">CSS2D标签</option>
                    <option value="sprite">Sprite标签</option>
                </select>
            </div>
            
            <div class="control-group">
                <label>参考几何体:</label>
                <select id="geometryType">
                    <option value="box">立方体</option>
                    <option value="sphere">球体</option>
                    <option value="plane">平面</option>
                    <option value="torus">圆环</option>
                </select>
            </div>
        </div>
        
        <div id="label-info">
            <h3 id="label-title">CSS3D标签</h3>
            <div id="label-description">
                <p><strong>描述:</strong> CSS3DRenderer用于在3D空间中渲染HTML元素，可以创建立体的网页界面效果。</p>
                <p><strong>主要特点:</strong></p>
                <ul class="feature-list">
                    <li><span class="feature-icon">🎨</span><strong>完整HTML/CSS支持:</strong> 支持所有HTML元素和CSS样式，包括动画、渐变、阴影等高级效果</li>
                    <li><span class="feature-icon">🔄</span><strong>真实3D变换:</strong> 元素在3D空间中进行真实的旋转、缩放和位移变换</li>
                    <li><span class="feature-icon">👁️</span><strong>透视投影:</strong> 支持透视投影效果，远近物体呈现真实的视觉深度感</li>
                    <li><span class="feature-icon">🔗</span><strong>WebGL场景融合:</strong> 可与WebGL渲染的3D对象完美融合，实现混合渲染</li>
                    <li><span class="feature-icon">⚡</span><strong>硬件加速:</strong> 利用GPU加速渲染，确保流畅的3D变换性能</li>
                    <li><span class="feature-icon">📱</span><strong>响应式设计:</strong> 支持响应式布局，适配不同屏幕尺寸和设备</li>
                </ul>
                <p><strong>详细应用案例:</strong></p>
                <div class="case-study">
                    <h5><span class="case-icon">🏥</span>智慧医院3D导航系统</h5>
                    <div class="case-content">
                        <div class="case-overview">
                            <h6>项目背景</h6>
                            <p>某大型三甲医院需要为患者和访客提供直观的3D导航系统，帮助他们在复杂的医院建筑中快速找到目标科室。传统的2D平面图难以表达多层建筑的空间关系，患者经常迷路。</p>
                        </div>
                        
                        <div class="case-implementation">
                            <h6>技术实现</h6>
                            <div class="implementation-details">
                                <div class="tech-point">
                                    <strong>🏗️ 3D建筑模型:</strong> 使用Three.js构建医院的完整3D模型，包括各楼层、科室、走廊、电梯等空间结构
                                </div>
                                <div class="tech-point">
                                    <strong>🏷️ CSS3D信息标签:</strong> 为每个科室创建CSS3D标签，显示科室名称、开放时间、当前排队人数、医生信息等
                                </div>
                                <div class="tech-point">
                                    <strong>🎯 智能路径规划:</strong> 集成A*算法，为用户规划最优路径，路径上的关键节点使用CSS3D标签标注转弯提示
                                </div>
                                <div class="tech-point">
                                    <strong>📱 多设备适配:</strong> 响应式设计支持手机、平板、大屏显示器，标签大小和内容自动调整
                                </div>
                                <div class="tech-point">
                                    <strong>🔄 实时数据同步:</strong> 标签内容与医院HIS系统实时同步，显示最新的科室状态和等候信息
                                </div>
                            </div>
                        </div>
                        
                        <div class="case-features">
                            <h6>核心功能特性</h6>
                            <div class="feature-grid">
                                <div class="feature-item">
                                    <span class="feature-badge">交互导航</span>
                                    <p>点击科室标签查看详细信息，包括医生排班、科室介绍、预约挂号链接</p>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-badge">动态标签</span>
                                    <p>标签颜色根据科室状态变化：绿色(正常)、黄色(繁忙)、红色(暂停服务)</p>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-badge">层级切换</span>
                                    <p>支持楼层切换，相关标签自动显示/隐藏，保持界面清晰</p>
                                </div>
                                <div class="feature-item">
                                    <span class="feature-badge">无障碍设计</span>
                                    <p>支持语音播报、大字体模式、高对比度显示，照顾特殊需求用户</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="case-results">
                            <h6>应用效果</h6>
                            <div class="results-stats">
                                <div class="stat-item">
                                    <span class="stat-number">85%</span>
                                    <span class="stat-label">患者找路时间减少</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-number">92%</span>
                                    <span class="stat-label">用户满意度提升</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-number">60%</span>
                                    <span class="stat-label">咨询台询问减少</span>
                                </div>
                                <div class="stat-item">
                                    <span class="stat-number">15万+</span>
                                    <span class="stat-label">月活跃用户数</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            


        </div>
    </div>
    
    <!-- 右侧面板 -->
    <div id="right-panel">
        <div id="technical-details">
            <h4>技术要点:</h4>
            <div class="tech-points">
                <div class="tech-point">
                    <strong>渲染器设置:</strong>
                    <p>需要创建CSS3DRenderer实例，并设置其DOM元素的样式和位置。</p>
                </div>
                <div class="tech-point">
                    <strong>场景分离:</strong>
                    <p>CSS3D对象需要添加到独立的CSS3D场景中，与WebGL场景分开管理。</p>
                </div>
                <div class="tech-point">
                    <strong>缩放调整:</strong>
                    <p>通常需要调整CSS3D对象的缩放比例以匹配3D场景的尺度。</p>
                </div>
            </div>
        </div>
        
        <div id="usage-guide">
            <h4>使用说明:</h4>
            <ol>
                <li>创建HTML元素并设置样式</li>
                <li>使用CSS3DObject包装HTML元素</li>
                <li>设置3D位置和变换</li>
                <li>添加到CSS3D场景</li>
                <li>在动画循环中渲染CSS3D场景</li>
            </ol>
        </div>
        
        <div id="label-comparison">
            
            <!-- 技术详细对比 -->
            <div class="tech-details">
                <h4>技术详细对比</h4>
                <div class="tech-detail-item">
                    <h5>CSS2DRenderer</h5>
                    <div class="tech-features">
                        <span class="feature-tag">DOM渲染</span>
                        <span class="feature-tag">2D显示</span>
                        <span class="feature-tag">HTML交互</span>
                        <span class="feature-tag">CSS样式</span>
                    </div>
                    <p class="tech-description">基于DOM的2D标签渲染器，标签始终面向相机，不受3D透视影响。支持完整的HTML和CSS功能，适合需要复杂交互的场景。</p>
                    <div class="tech-pros-cons">
                        <div class="pros">
                            <strong>优势：</strong>完全的HTML/CSS支持、丰富的交互能力、易于样式定制
                        </div>
                        <div class="cons">
                            <strong>劣势：</strong>不支持3D透视、性能相对较低、层级管理复杂
                        </div>
                    </div>
                </div>
                
                <div class="tech-detail-item">
                    <h5>CSS3DRenderer</h5>
                    <div class="tech-features">
                        <span class="feature-tag">DOM渲染</span>
                        <span class="feature-tag">3D透视</span>
                        <span class="feature-tag">HTML交互</span>
                        <span class="feature-tag">CSS3D变换</span>
                    </div>
                    <p class="tech-description">基于DOM的3D标签渲染器，支持3D变换和透视效果。能够创建立体的用户界面元素。</p>
                    <div class="tech-pros-cons">
                        <div class="pros">
                            <strong>优势：</strong>支持3D透视、完整HTML/CSS功能、立体视觉效果
                        </div>
                        <div class="cons">
                            <strong>劣势：</strong>性能开销大、复杂场景卡顿、移动端兼容性
                        </div>
                    </div>
                </div>
                
                <div class="tech-detail-item">
                    <h5>CSS3DSprite</h5>
                    <div class="tech-features">
                        <span class="feature-tag">CSS3D渲染</span>
                        <span class="feature-tag">精灵特性</span>
                        <span class="feature-tag">DOM元素</span>
                        <span class="feature-tag">面向相机</span>
                    </div>
                    <p class="tech-description">基于CSS3D的精灵标签，结合DOM元素和3D变换的优势，始终面向相机显示。</p>
                    <div class="tech-pros-cons">
                        <div class="pros">
                            <strong>优势：</strong>支持HTML/CSS、3D透视效果、始终面向相机、良好性能
                        </div>
                        <div class="cons">
                            <strong>劣势：</strong>需要CSS3D支持、复杂场景性能下降、移动端兼容性
                        </div>
                    </div>
                </div>
                
                <div class="tech-detail-item">
                    <h5>Sprite</h5>
                    <div class="tech-features">
                        <span class="feature-tag">WebGL渲染</span>
                        <span class="feature-tag">3D透视</span>
                        <span class="feature-tag">高性能</span>
                        <span class="feature-tag">纹理映射</span>
                    </div>
                    <p class="tech-description">基于WebGL的纹理标签，高性能渲染，支持3D透视。适合大量标签的高性能场景。</p>
                    <div class="tech-pros-cons">
                        <div class="pros">
                            <strong>优势：</strong>最高性能、支持大量标签、3D透视效果、GPU加速
                        </div>
                        <div class="cons">
                            <strong>劣势：</strong>不支持HTML交互、样式定制受限、文本渲染复杂
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 代码示例 -->
            <div class="code-examples">
                <h4>代码使用示例</h4>
                
                <div class="code-section">
                    <h5>CSS2D标签创建</h5>
                    <pre><code>// 创建CSS2D标签
const labelDiv = document.createElement('div');
labelDiv.className = 'css2d-label';
labelDiv.textContent = '标签文本';

const label = new THREE.CSS2DObject(labelDiv);
label.position.set(0, 2, 0);
mesh.add(label);

// CSS样式
.css2d-label {
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
}</code></pre>
                </div>
                
                <div class="code-section">
                    <h5>CSS3D标签创建</h5>
                    <pre><code>// 创建CSS3D标签
const labelDiv = document.createElement('div');
labelDiv.className = 'css3d-label';
labelDiv.textContent = '3D标签';

const label = new THREE.CSS3DObject(labelDiv);
label.position.set(0, 2, 0);
label.scale.set(0.01, 0.01, 0.01);
scene.add(label);

// CSS样式
.css3d-label {
  background: rgba(0,255,255,0.2);
  color: cyan;
  padding: 10px 15px;
  border: 1px solid cyan;
  border-radius: 8px;
}</code></pre>
                </div>
                
                <div class="code-section">
                    <h5>Sprite标签创建</h5>
                    <pre><code>// 创建Sprite标签
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 256;
canvas.height = 64;

// 绘制文本
context.fillStyle = 'rgba(0,0,0,0.8)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'white';
context.font = '24px Arial';
context.fillText('Sprite标签', 10, 40);

// 创建纹理和材质
const texture = new THREE.CanvasTexture(canvas);
const material = new THREE.SpriteMaterial({ map: texture });
const sprite = new THREE.Sprite(material);
sprite.position.set(0, 2, 0);
scene.add(sprite);</code></pre>
                </div>
                
                <div class="code-section">
                    <h5>渲染器设置</h5>
                    <pre><code>// CSS2D渲染器
const css2dRenderer = new THREE.CSS2DRenderer();
css2dRenderer.setSize(width, height);
css2dRenderer.domElement.style.position = 'absolute';
css2dRenderer.domElement.style.top = '0';
container.appendChild(css2dRenderer.domElement);

// CSS3D渲染器
const css3dRenderer = new THREE.CSS3DRenderer();
css3dRenderer.setSize(width, height);
css3dRenderer.domElement.style.position = 'absolute';
css3dRenderer.domElement.style.top = '0';
container.appendChild(css3dRenderer.domElement);

// 渲染循环
function animate() {
  renderer.render(scene, camera);
  css2dRenderer.render(scene, camera);
  css3dRenderer.render(css3dScene, camera);
  requestAnimationFrame(animate);
}</code></pre>
                </div>
            </div>
         </div>
        
        <div id="code-example">
            <h4>代码示例:</h4>
            <pre><code id="code-content">// CSS3D标签示例
const element = document.createElement('div');
element.innerHTML = '标签内容';
const css3dObject = new THREE.CSS3DObject(element);
css3dObject.position.set(x, y, z);
css3dObject.scale.setScalar(0.01);
css3dScene.add(css3dObject);</code></pre>
        </div>
    </div>
    
    <canvas id="canvas"></canvas>
    <script type="module" src="main.js"></script>
</body>
</html>